/*
    2023/3/3
    商品详情的demo页
 */
<template>
    <div>
        <!--头部区域-->
        <PageHeader />

        <!--导航区域-->
        <PageNav />

        <!--内容区域-->
        <div class="list">
            <div class="box">
                <div class="detail">
                    <el-row>
                        <el-col :span="11">
                            <!--左侧大图-->
                            <div>
                                <div>大图</div>

                                <!--小图-->
                                <el-carousel :interval="4000" type="card" height="200px">
                                    <el-carousel-item v-for="item in 6" :key="item">
                                        <h3 class="medium">{{ item }}</h3>
                                    </el-carousel-item>
                                </el-carousel>

                            </div>
                        </el-col>
                        <el-col :span="12" :offset="1">
                            <!--右侧详情-->
                            <div style="text-align:left;">
                                <div style="font-weight:600;font-size:24px;"> {{ detailData.name }}</div>
                                <el-row class="item">
                                    <el-col :span="3">价格：</el-col>
                                    <el-col :span="21"><span style="color:red;font-size:18px;">￥{{
                                        detailData.salePrice.toFixed(2) }}</span></el-col>
                                </el-row>
                                <el-row class="item">
                                    <el-col :span="3">颜色：</el-col>
                                    <el-col :span="21">
                                        <el-tag type="success" effect="plain" v-for="(item, index) in colors" :key="index"
                                            :class="[{ 'action-tag1': changeSelectTag1 == index }]"
                                            @click="eventSelectTag1(index)">{{ item }}</el-tag>
                                    </el-col>
                                </el-row>
                                <el-row class="item">
                                    <el-col :span="3">尺寸：</el-col>
                                    <el-col :span="21">
                                        <el-tag type="success" v-for="(item, index) in sizes" :key="index"
                                            :class="[{ 'action-tag2': changeSelectTag2 == index }]" effect="plain"
                                            @click="eventSelectTag2(index)">{{ item }}</el-tag>
                                    </el-col>
                                </el-row>

                                <el-row>
                                    <el-col :span="8">
                                        <el-input-number v-model="num" @change="eventNumberChange" :min="1" :max="10"
                                            label="描述文字"></el-input-number>
                                    </el-col>
                                    <el-col :span="11" :offset="1">
                                        <el-button type="danger">加入购物车</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>

                    <!--商品介绍描述-->
                    <div>
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="商品价格" name="first">用户管理</el-tab-pane>
                            <el-tab-pane label="商品规格" name="second">配置管理</el-tab-pane>
                            <el-tab-pane label="商品评价" name="third">角色管理</el-tab-pane>
                            <el-tab-pane label="商品服务" name="fourth">定时任务补偿</el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>

        <!--底部区域-->
        <PageFooter />
    </div>
</template>

<script>

//引入组件页面
import PageNav from '@/components/PageNav.vue'
import PageHeader from '@/components/PageHeader.vue'
import PageFooter from '@/components/PageFooter.vue'

export default {

    components: {
        //声明刚才我们引入的页面，是一个组件
        PageNav, PageHeader, PageFooter
    },
    data() {
        return {
            num: 1,
            activeName: 'second',
            changeSelectTag1: 0,
            changeSelectTag2: 0,
            detailData: {
                name: '苹果IPhone 14 pro 16G+256G+白色 16寸大屏',
                salePrice: 3999.00,
                color: '白色',
                size: '256G',
                conveImg: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                images: [
                    // "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                    // "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                    // "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                    // "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                    // "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                ]
            },
            colors: ["白色", "银色", "灰色"],
            sizes: ["128G", "256G", "512G"]
        }
    },
    mounted() {
        //接收列表页传过来的对象
        //let id = this.$route.query.id
        this.loadData(1)
    },
    methods: {
        //计数器的事件
        eventNumberChange(value) {
            console.log(value)
        },
        //颜色尺寸选择事件
        eventSelectTag1(index) {
            this.changeSelectTag1 = index
        },
        eventSelectTag2(index) {
            this.changeSelectTag2 = index
        },
        //加载数据
        loadData(id) {
            console.log(id)
            //需要处理选中样式
        }
    }
}
</script>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.item {
    margin: 15px 0;
}

.el-tag {
    height: 35px;
    line-height: 35px;
    min-width: 60px;
    text-align: center;
    font-size: 16px;
    margin-right: 15px;
    cursor: pointer;
}

.action-tag1,
.action-tag2 {
    border: 1px solid red;
}
</style>